<template>
	<div class="version-container" @click="handleCheckUpdate">
		<span class="version-label">版本</span>
		<span class="version-number">v{{ version }} 检查更新</span>
	</div>
</template>

<script setup>
	// 引入electron

	const { ipcRenderer } = require('electron');

	const props = defineProps({
		version: {
			type: String,
			default: '',
		},
	});

	const version = ref('');

	const emit = defineEmits(['checkUpdate']);

	const handleCheckUpdate = () => {
		emit('checkUpdate');
	};

	onMounted(async () => {
		try {
			const res = await ipcRenderer.invoke('getVersion');
			console.log('🚀 ~ onMounted ~ res:', res);
			version.value = props.version ? props.version : res.version;
		} catch (error) {
			console.error('🚀 ~ onMounted ~ error:', error);
		}
	});
</script>

<style lang="scss" scoped>
	.version-container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 14px;
		color: #95a5a6;
		position: relative;
		z-index: 1000;

		.version-label {
			font-weight: 500;
		}

		.version-number {
			color: #7f8c8d;
		}

		&:hover {
			.version-number {
				color: #6c8eaf;
			}
		}
	}
</style>
